window.onload = function(){
	//轮播
	var index = 0;
	var timer = null;
	var timers = null;
	var flag = true;
	//获取需要轮播的目标
	var silider_bottom = document.getElementById("silider_bottom");
//	获取目标的所有孩子
	var lis = silider_bottom.children;
//	克隆第一个和最后一个
	var lis_first = lis[0].cloneNode(true);
	var lis_last = lis[lis.length - 1].cloneNode(true);
	silider_bottom.insertBefore(lis_last,lis[0]);
	silider_bottom.append(lis_first);
//	设置目标的初始值
	silider_bottom.style.left = 0;
	
//	自动轮播函数
	function autoplay(){
		timers = setInterval(function(){
			index++;
			play();
		},2000);
	}
	
//	获取鼠标停留清除定时器
	var slider_main = document.querySelector(".slider");
//	鼠标进入
	slider_main.onmouseenter = function(){
		clearInterval(timers);
	}
//	鼠标离开
	slider_main.onmouseleave = function(){
		autoplay();
	}
	autoplay();
	
//	轮播函数
	function play(){
		handle();
		animate(silider_bottom, index * -96, 1000, function(){
			flag = true;
		});
	}
	//	左右两侧按钮点击
	var btn_left = document.getElementById("btn_left");
	var btn_right = document.getElementById("btn_right");
	btn_left.onclick = function(){
		if(flag){
			index--;
			play();
			flag = false;
		}
		
	}
	btn_right.onclick = function(){
		if(flag){
			index++;
			play();
			flag = false;
		}
		
	}
//	控制索引的函数
	function handle(){
		if(index > lis.length - 4){
			index = 0;
		}else if(index < 0){
			index = lis.length - 4;
		}
		return index;
	}
//	动画函数
	function animate(obj,target,time,callback){
		clearInterval(timer)
		var obj_left = parseInt(obj.style.left);
		var frame = 20;
		var z = time / frame;
		var t = 0;
		var count = (target-obj_left)/ z;

		timer = setInterval(function(){
			obj_left += count;
	//			赋值失败
			obj.style.left = obj_left + "px";
				
			t++;
			if(t >= z){
				callback && callback();
				clearInterval(timer);
			}
		},frame);

	}
	
	
	
	
	
	
	
	//添加点击以后出现边框
	//点击以后当前图片的路径给chang这个img
	var change_img = document.querySelector(".change");
	var change_2 = document.getElementsByClassName("change")[1];
	for(var i = 0; i < lis.length; i++){
		lis[i].index = i;
		lis[i].onclick = function(){
			for(var j = 0; j < lis.length; j++){
				lis[j].className = "";
			}
			lis[this.index].className = "bd-color";
			change_img.src = lis[this.index].children[0].src;
			change_2.src = lis[this.index].children[0].src;
		}
	}
	
//	放大镜功能
	var img_fdj = document.querySelector(".main-left");
	var img = document.getElementsByClassName("image")[0];
	var box = document.querySelector(".box");
	var fdj = document.querySelector(".fdj");
	var change = fdj.getElementsByTagName("img")[0];
	var num = 0;
	img.onmouseenter = function(){
		box.style.display = "block";
		fdj.style.display = "block";
		img.onmousemove = function(event){
			var event = event || window.event;
			var box_left = event.pageX;
			var box_top = event.pageY;
			var boxTop = box_top - img_fdj.offsetTop - box.offsetHeight / 2;
			var boxLeft = box_left - img_fdj.offsetLeft - box.offsetWidth / 2;
			if(boxLeft < 0){
				boxLeft = 0;
			}else if(boxLeft > img_fdj.offsetWidth - box.offsetWidth){
				boxLeft = img_fdj.offsetWidth - box.offsetWidth;
			}
			if(boxTop < 0){
				boxTop = 0;
			}else if(boxTop > img_fdj.offsetHeight - box.offsetHeight){
				boxTop = img_fdj.offsetHeight - box.offsetHeight;
			}
			box.style.top = boxTop + "px";
			box.style.left = boxLeft + "px";
			num = fdj.offsetWidth / box.offsetWidth;
			change.style.top = box.offsetTop * (-num) + "px";
			change.style.left = box.offsetLeft * (-num) + "px";
		
		}
		
	}
	img.onmouseleave = function(){
		box.style.display = "none";
		fdj.style.display = "none";
	}
	
	
	//ems添加默认
	var ems = document.getElementById("ems");
	var em = ems.children;
	for(var i = 0; i < em.length; i++){
		em[i].index = i;
		em[i].onclick = function(){
			for(var j = 0; j < em.length; j++){
				em[j].className = "";
			}
			em[this.index].className = "in";
		}
	}
	
	//form
	var form_info = document.getElementById("form_info");
	var inputObj = form_info.getElementsByTagName("input")[0];
	var jia = document.getElementById("jia");
	var jian = document.getElementById("jian");
	
	
	//失去焦点时，如果input里的值不是一个数字则设定为1
	inputObj.onblur = function(){
		if(isNaN(inputObj.value)){
			inputObj.value = 1;
		}
	}
	//点击数量加减
	jia.onclick = function(){
		add(inputObj);
	}
	jian.onclick = function(){
		reduce(inputObj);
	}
	
	
//	清除button的默认事件
	var btns = form_info.getElementsByTagName("button");
	for(var i = 0; i < btns.length; i++){
		btns[i].onclick = function(event){
			event.preventDefault();
		}
	}
	
	
	btns[0].onclick = function(event){
		var pro_price = document.getElementById("pro_price");
		var pro_num = document.getElementById("pro_num").value;
		var r = parseInt(Math.random()*6);
		var pro_info = {
			change_img_src:change_img.src,
			test:"玫丽盼（Milbon）护发精油 Milbon 玫丽盼 免洗护发精油 粗硬发质 120ml/瓶",
			price:pro_price.innerHTML,
			pro_num:pro_num,
			id:r
		}
		set(pro_info);
		event.preventDefault();
		if(document.cookie){
			location.href = "shop_car.html";
		}else {
			location.href = "login.html";
		}
	}
	btns[1].onclick = function(event){
		location.href = "comfirm.html";
		console.log(11);
		event.preventDefault();
	}
	
	
	//	tab切换
	//	获取目标
	var tab_title = document.querySelector(".tab-title");
	var liss= tab_title.getElementsByTagName("li");
	var tab_main = document.querySelector(".tab-main");
	var tab_div = tab_main.children;
	//	便利
	for(var i = 0; i < liss.length; i++){
//		索引
		liss[i].index = i;
//		鼠标进入触发事件
		liss[i].onmouseenter = function(){
//			清空所有类名
			for(var j = 0; j < liss.length; j++){
				liss[j].className = "";
				tab_div[j].style.display = "none";
			}
//			当前显示
			liss[this.index].className = "tab-border";
			tab_div[this.index].style.display = "block";
		}
	}
	
	
	
}

